<template>
  <div class="chart" :id="cid" />
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    // 图表ID
    cid: {
      type: String,
      required: true,
      default: "",
    },
    // 图表数据
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 显示提示框
    tooltip: {
      type: Boolean,
      default: true,
    },
    // 间隙
    padAngle: {
      type: [Number, String],
      default: 0,
    },
    // 图表位置
    position: {
      type: Array,
      default: () => ["50%", "50%"],
    },
    // 颜色
    colors: {
      type: Array,
      default: () => [
        "#157DFA",
        "#9B4ADC",
        "#F8A470",
        "#F928F6",
        "#3D98D9",
        "#73D694",
      ],
    },
    // 饼状图半径
    radius: {
      type: [String, Array],
      default: "40%",
    },
    // 饼状图半径宽度
    radiusWidth: {
      type: [Number, String],
      default: 0,
    },
    // 文字
    label: {
      type: String,
      default: "",
    },
    // 文字颜色
    labelColor: {
      type: String,
      default: "#fff",
    },
    // 文字大小
    labelSize: {
      type: String,
      default: "10px",
    },
    // 文字位置
    labelPos: {
      type: String,
      default: "center",
    },
    // 阴影颜色(默认''则 20%透明)
    shadowColor: {
      type: String,
      default: "",
    },
    // 显示图例
    legend: {
      type: Boolean,
      default: true,
    },
    // 图例文本颜色
    legColor: {
      type: String,
      default: "#fff",
    },
    // 图例图标形状
    // 'circle','rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    legIcon: {
      type: String,
      default: "rect",
    },
    // 图例图标大小
    legIconSize: {
      type: [String, Number],
      default: 10,
    },
    legItemGap: {
      type: [String, Number],
      default: 20,
    },
    legSize: {
      type: [String, Number],
      default: 14,
    },
    // 图例距离顶部的距离
    legTop: {
      type: [String, Number, null],
      default: null,
    },
    // 图例距离左边的距离
    legLeft: {
      type: [String, Number, null],
      default: null,
    },
    // 图例距离右边的距离
    legRight: {
      type: [String, Number, null],
      default: null,
    },
    // 图例距离底部的距离
    legBottom: {
      type: [String, Number, null],
      default: null,
    },
    // 图例排列方式 'horizontal', 'vertical'
    legOrient: {
      type: String,
      default: "vertical",
    },
    pie: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.initChart();
        });
      },
    },
  },
  methods: {
    // 初始化图表
    initChart() {
      let domid = document.getElementById(this.cid);
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let option = {
        color: this.colors,
        series: [
          {
            type: "pie",
            radius: this.radius,
            hoverAnimation: true,
            name: this.label,
            center: this.position,
            padAngle: this.padAngle,
            avoidLabelOverlap: false,
            data: this.data,
            labelLine: { show: false },
            label: {
              show: true,
              color: this.labelColor,
              fontSize: this.labelSize,
              position: this.labelPos,
              formatter: () => {
                return `${this.label}`;
              },
            },
          },
        ],
        legend: {
          show: this.legend,
          itemWidth: this.legIconSize,
          itemHeight: this.legIconSize,
          orient: this.legOrient,
          data: this.data,
          right: this.legRight,
          top: this.legTop,
          left: this.legLeft,
          bottom: this.legBottom,
          textStyle: {
            color: this.legColor,
            fontSize: this.legSize,
            itemHeight: this.legIconSize,
          },
          itemGap: this.legItemGap,
        },
        tooltip: {
          show: this.tooltip,
          trigger: "item",
          axisPointer: {
            type: "line",
          },
          formatter: (e) => {
            return `占比：${e.percent}%<br/>${e.name}: ${e.value}`;
          },
        },
      };
      if (this.pie) {
        option.series[0].label.normal = {
          show: this.pie,
          position: "inner",
          formatter: "{d}%",
          textStyle: {
            color: "#fff",
            fontWeight: "bold",
            fontSize: 14,
          },
        };
      }
      myChart.setOption(option, true, true);

      myChart.on("click", (e) => {
        this.$emit("click", e);
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
